<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>02gridsystem</title>
		<link type="text/css" href="css/bootstrap.min.css" 
			rel="stylesheet"/>
		<style type="text/css">
			[class*='span']{background : yellow;}
			/* class* = 클리스 이름이 span으로 시작하는 것들을 지정한다. */
		</style>
	</head>
	<body>
		<div>
			<h1 class="page-header">12컬럼 그리드 시스템
				<small>고정폭 레이아웃</small></h1>
			<div class="container">				
			<!-- 그리스 시스템 -->
				<div class="row"><!-- 행 -->
					<div class="span1">1열</div>	<!-- 열 -->
					<div class="span1">2열</div>	<!-- 열 -->
					<div class="span1">3열</div>	<!-- 열 -->
					<div class="span1">4열</div>	<!-- 열 -->
					<div class="span1">5열</div>	<!-- 열 -->
					<div class="span1">6열</div>	<!-- 열 -->
					<div class="span1">7열</div>	<!-- 열 -->
					<div class="span1">8열</div>	<!-- 열 -->
					<div class="span1">9열</div>	<!-- 열 -->
					<div class="span1">10열</div> <!-- 열 -->
					<div class="span1">11열</div>	 <!-- 열 -->
					<div class="span1">12열</div> <!-- 열 -->
				</div>		
				<div class="row"> 
					<div class="span3">3열</div>
					<div class="span3">3열</div>
					<div class="span3">3열</div>
					<div class="span3">3열</div>
				</div>
			</div>
		</div>
		<div>
			<h1 class="page-header">12컬럼 그리드 시스템
				<small>가변폭 레이아웃</small></h1>
			<div class="container-fluid">				
			<!-- 그리스 시스템 -->
				<div class="row-fluid"><!-- 행 -->
					<div class="span1">1열</div>	<!-- 열 -->
					<div class="span1">2열</div>	<!-- 열 -->
					<div class="span1">3열</div>	<!-- 열 -->
					<div class="span1">4열</div>	<!-- 열 -->
					<div class="span1">5열</div>	<!-- 열 -->
					<div class="span1">6열</div>	<!-- 열 -->
					<div class="span1">7열</div>	<!-- 열 -->
					<div class="span1">8열</div>	<!-- 열 -->
					<div class="span1">9열</div>	<!-- 열 -->
					<div class="span1">10열</div> <!-- 열 -->
					<div class="span1">11열</div> <!-- 열 -->
					<div class="span1">12열</div> <!-- 열 -->
				</div>		
				<div class="row-fluid"> 
					<div class="span4">3열</div>
					<div class="span4">3열</div>
					<div class="span4">3열</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/bootstrap.min.js"></script>		
	</body>
</html>